CSS Table Size

Table Width and Height

The width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> elements to 70px:

Example


            <!DOCTYPE html>
            <html>
            <head>
            <style>
            table, td, th {
              border: 1px solid black;
            }
            
            table {
              border-collapse: collapse;
              width: 100%;
            }
            
            th {
              height: 70px;
            }
            </style>
            </head>
            <body>
            
            <h2>The width and height Properties</h2>
            
            <p>Set the width of the table, and the height of the table header row:</p>
            
            <table>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Savings</th>
              </tr>
              <tr>
                <td>Peter</td>
                <td>Griffin</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>Lois</td>
                <td>Griffin</td>
                <td>$150</td>
              </tr>
              <tr>
                <td>Joe</td>
                <td>Swanson</td>
                <td>$300</td>
              </tr>
              <tr>
                <td>Cleveland</td>
                <td>Brown</td>
                <td>$250</td>
              </tr>
            </table>
            
            </body>
            </html>

Result:

The width and height Properties

Set the width of the table, and the height of the table header row:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300
Cleveland	Brown	$250

Full-Width Table

The table above might seem small in some cases. If you need a table that should span the entire screen (full-width), add width: 100% to the <table> element:

Example


        <!DOCTYPE html>
        <html>
        <head>
        <style>
        table, td, th {
          border: 1px solid black;
        }
        
        table {
          border-collapse: collapse;
          width: 100%;
        }
        
        td {
          text-align: center;
        }
        </style>
        </head>
        <body>
        
        <h2>The text-align Property</h2>
        
        <p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td.</p>
        
        <table>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>Peter</td>
            <td>Griffin</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>Lois</td>
            <td>Griffin</td>
            <td>$150</td>
          </tr>
          <tr>
            <td>Joe</td>
            <td>Swanson</td>
            <td>$300</td>
          </tr>
          <tr>
            <td>Cleveland</td>
            <td>Brown</td>
            <td>$250</td>
          </tr>
        </table>
        
        </body>
        </html>

Result:

The text-align Property

This property sets the horizontal alignment (like left, right, or center) of the content in th or td.

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300
Cleveland	Brown	$250